CSS @font-face: Mestre avansert skriftinnlasting for global webdesign

I dagens globaliserte digitale landskap spiller typografi en avgjørende rolle i utformingen av brukeropplevelse og merkeidentitet. CSS-regelen @font-face er hjørnesteinen for å innlemme egendefinerte skrifttyper på nettstedet ditt. Det er imidlertid ikke nok å bare lenke til en skriftfil. For å virkelig mestre skriftinnlasting, må du forstå avanserte teknikker som optimaliserer ytelsen, sikrer nettleserkompatibilitet og forbedrer tilgjengeligheten for et mangfoldig internasjonalt publikum. Denne omfattende guiden vil dykke ned i disse avanserte aspektene, og gi deg kunnskapen og verktøyene du trenger for å effektivt håndtere skrifttyper i dine webprosjekter.

Forstå det grunnleggende i @font-face

Før vi dykker ned i avanserte teknikker, la oss raskt repetere det grunnleggende i @font-face. Denne CSS-regelen lar deg spesifisere egendefinerte skriftfiler som nettleseren kan laste ned og bruke til å gjengi tekst på nettsiden din.

En grunnleggende @font-face-deklarasjon ser slik ut:

            @font-face {
 font-family: 'MyCustomFont';
 src: url('mycustomfont.woff2') format('woff2'),
 url('mycustomfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

body {
 font-family: 'MyCustomFont', sans-serif;
}

            

              
                Copy
              
            
          

La oss bryte ned hver del:

• font-family: Dette er navnet du vil bruke for å referere til skrifttypen i CSS-reglene dine. Velg et beskrivende og unikt navn.
• src: Denne egenskapen spesifiserer URL-en(e) til skriftfilen(e). Du bør oppgi flere skriftformater for bredere nettleserstøtte (mer om dette senere).
• format: Denne attributten gir nettleseren et hint om formatet på skriftfilen. Dette hjelper nettleseren med å velge den riktige skriftfilen å laste ned.
• font-weight: Definerer vekten på skrifttypen (f.eks. normal, bold, 100, 900).
• font-style: Definerer stilen på skrifttypen (f.eks. normal, italic, oblique).

Skriftformater: Sikre nettleserkompatibilitet

Ulike nettlesere støtter ulike skriftformater. For å sikre at nettstedet ditt ser konsistent ut i alle nettlesere, bør du oppgi flere skriftformater i @font-face-deklarasjonen din. Her er en oversikt over vanlige skriftformater og deres nettleserstøtte:

• WOFF2 (Web Open Font Format 2.0): Det mest moderne og anbefalte formatet. Det tilbyr overlegen komprimering og ytelse. Støttet av alle moderne nettlesere.
• WOFF (Web Open Font Format): Et bredt støttet format som gir god komprimering. Støttet av de fleste moderne nettlesere og eldre versjoner av Internet Explorer.
• TTF (TrueType Font): Et eldre format, mindre optimalisert for nettet enn WOFF/WOFF2. Krever mer båndbredde, så prioriter WOFF2/WOFF.
• EOT (Embedded Open Type): Et utdatert format, hovedsakelig for eldre versjoner av Internet Explorer. Anbefales ikke for bruk på moderne nettsteder.
• SVG Fonts: Et annet utdatert format. Anbefales ikke for bruk.

En robust @font-face-deklarasjon bør inkludere minst WOFF2- og WOFF-formater:

            @font-face {
 font-family: 'MyCustomFont';
 src: url('mycustomfont.woff2') format('woff2'),
 url('mycustomfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

            

              
                Copy
              
            
          

Rekkefølgen betyr noe: List opp de mest moderne formatene først (WOFF2), etterfulgt av eldre formater (WOFF, TTF). Dette lar nettlesere velge det mest effektive formatet de støtter.

Avanserte teknikker for skriftinnlasting

Utover grunnleggende innbygging av skrifttyper, finnes det flere avanserte teknikker som gir finkornet kontroll over skriftinnlasting, noe som forbedrer ytelse og brukeropplevelse.

1. Font Display: Kontrollere gjengivelsesatferd for skrifttyper

Egenskapen font-display kontrollerer hvordan nettleseren håndterer gjengivelsen av tekst før skrifttypen er fullstendig lastet ned. Den gir flere alternativer, som hver tilbyr en ulik avveining mellom innledende gjengivelseshastighet og visuell konsistens.

• auto: Nettleseren bruker sin standardstrategi for skriftinnlasting. Dette er vanligvis likt block.
• block: Nettleseren skjuler teksten en kort stund til skrifttypen er lastet ned. Dette forhindrer et "glimt av uformatert tekst" (FOUT), men kan forsinke den første gjengivelsen. Blokkperioden er vanligvis veldig kort.
• swap: Nettleseren gjengir teksten umiddelbart med en reserveskrift og bytter til den egendefinerte skrifttypen når den er lastet ned. Dette sikrer at teksten er synlig med en gang, men kan resultere i en merkbar FOUT.
• fallback: Ligner på swap, men med en kortere blokkperiode og bytteperiode. Nettleseren blokkerer i en veldig kort periode, og bytter deretter til en reserveskrift. Hvis den egendefinerte skrifttypen ikke lastes inn innen en viss tidsramme, brukes reserveskriften på ubestemt tid.
• optional: Nettleseren bestemmer om den skal laste ned skrifttypen basert på brukerens tilkoblingshastighet og andre faktorer. Den prioriterer gjengivelseshastighet og kan velge å bruke reserveskriften i stedet for å laste ned den egendefinerte skrifttypen. Dette er ideelt for ikke-kritiske skrifttyper.

Slik bruker du font-display-egenskapen:

            @font-face {
 font-family: 'MyCustomFont';
 src: url('mycustomfont.woff2') format('woff2'),
 url('mycustomfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
 font-display: swap; /* Eller en annen verdi */
}

            

              
                Copy
              
            
          

Velge riktig font-display-verdi: Den beste verdien avhenger av dine spesifikke behov og prioriteringer.

• For kritisk tekst (f.eks. overskrifter, brødtekst), kan swap eller fallback gi en bedre brukeropplevelse ved å sikre umiddelbar synlighet av tekst, selv om det betyr en kort FOUT.
• For ikke-kritisk tekst (f.eks. dekorative elementer, ikoner), kan optional forbedre ytelsen ved å unngå unødvendige nedlastinger av skrifttyper.
• block bør brukes med forsiktighet, da det kan forsinke den første gjengivelsen.

2. Font Loading API: Avansert kontroll med JavaScript

Font Loading API gir programmatisk kontroll over skriftinnlasting ved hjelp av JavaScript. Dette lar deg:

• Oppdage når skrifttyper er lastet inn.
• Utløse handlinger etter at skrifttyper er lastet inn (f.eks. vise innhold, bruke animasjoner).
• Laste inn skrifttyper dynamisk basert på brukerinteraksjoner eller enhetsegenskaper.

Eksempel: Bruke Font Loading API for å oppdage skriftinnlasting:

            document.fonts.ready.then(function () {
 // Alle skrifttyper er lastet!
 console.log('All fonts loaded!');
 // Legg til en klasse på body for å indikere at skrifttyper er lastet
 document.body.classList.add('fonts-loaded');
});

            

              
                Copy
              
            
          

Eksempel: Laste en spesifikk skrifttype og sjekke statusen:

            const font = new FontFace('MyCustomFont', 'url(mycustomfont.woff2)');

font.load().then(function (loadedFont) {
 document.fonts.add(loadedFont);
 console.log('MyCustomFont loaded!');
 document.body.classList.add('my-custom-font-loaded');
}).catch(function (error) {
 console.error('Failed to load MyCustomFont:', error);
});

            

              
                Copy
              
            
          

Reservestrategi: Når du bruker JavaScript for skriftinnlasting, bør du alltid implementere en reservestrategi i tilfelle API-et ikke støttes eller skrifttypen ikke lastes inn. Dette kan innebære å bruke systemskrifter eller vise en melding til brukeren.

3. Variable skrifttyper: En revolusjon innen typografi

Variable skrifttyper er en enkelt skriftfil som kan inneholde flere variasjoner av en skrifttype, som for eksempel ulike vekter, bredder og stiler. Dette gir betydelige fordeler i forhold til tradisjonelle skriftformater:

• Mindre filstørrelser: En enkelt variabel skriftfil kan erstatte flere individuelle skriftfiler, noe som reduserer den totale filstørrelsen og forbedrer innlastingstidene.
• Fleksibilitet og kontroll: Du kan finjustere skriftvariasjoner med CSS, og skape presise typografiske hierarkier og visuelle effekter.
• Forbedret ytelse: Mindre data å laste ned betyr raskere gjengivelse og en bedre brukeropplevelse.

Bruke variable skrifttyper med @font-face:

            @font-face {
 font-family: 'MyVariableFont';
 src: url('myvariablefont.woff2') format('woff2');
 font-weight: 100 900; /* Definer rekkevidden av støttede vekter */
 font-stretch: 50% 200%; /* Definer rekkevidden av støttede bredder */
 font-style: normal;
}

body {
 font-family: 'MyVariableFont', sans-serif;
 font-weight: 400; /* Angi ønsket skriftvekt */
 font-stretch: 100%; /* Angi ønsket skriftbredde */
}

            

              
                Copy
              
            
          

CSS-egenskaper for variable skrifttyper:

• font-weight: Spesifiserer skriftvekten (f.eks. 100, 400, 700, 900).
• font-stretch: Spesifiserer skriftbredden (f.eks. ultra-condensed, condensed, normal, expanded, ultra-expanded). Alternativt kan du bruke prosentverdier.
• font-style: Spesifiserer skriftstilen (f.eks. normal, italic, oblique).
• font-variation-settings: Lar deg kontrollere egendefinerte skriftakser definert av skriftdesigneren. Denne egenskapen tar en liste med tag-verdi-par (f.eks. 'wght' 400, 'wdth' 100).

Eksempel: Bruke font-variation-settings for å kontrollere egendefinerte akser:

            .my-element {
 font-family: 'MyVariableFont', sans-serif;
 font-variation-settings: 'wght' 600, 'ital' 1;
}

            

              
                Copy
              
            
          

4. Subsetting av skrifttyper: Optimalisering for spesifikke tegnsett

Mange skrifttyper inneholder et stort tegnsett, inkludert glyfer for språk du kanskje ikke trenger. Subsetting innebærer å lage en egendefinert skriftfil som kun inkluderer tegnene som brukes på nettstedet ditt. Dette kan redusere filstørrelsen betydelig, spesielt for nettsteder som primært bruker et begrenset tegnsett (f.eks. det latinske alfabetet, tall, tegnsetting).

Verktøy for subsetting av skrifttyper:

• FontForge: En gratis og åpen kildekode-skrifteditor som lar deg manuelt subsette skrifttyper.
• Glyphhanger: Et kommandolinjeverktøy som analyserer HTML og CSS for å identifisere tegnene som brukes og generere en subsetted skriftfil.
• Online verktøy for subsetting av skrifttyper: Flere nettbaserte verktøy tilbyr funksjoner for subsetting av skrifttyper (søk etter "font subsetter").

Unicode-Range: Servere ulike skrifttyper for ulike språk

Beskrivelsen unicode-range i @font-face-regelen er et kraftig verktøy for å servere forskjellige skriftfiler basert på Unicode-tegnene som finnes i teksten. Dette lar deg laste inn spesifikke skrifttyper for forskjellige språk eller skriftsystemer, og sikrer at tegnene gjengis korrekt og effektivt.

Slik fungerer Unicode-Range:

Beskrivelsen unicode-range spesifiserer et område av Unicode-kodepunkter som skrifttypen skal brukes for. Nettleseren vil bare laste ned skriftfilen hvis teksten inneholder tegn innenfor det angitte området. Dette lar deg spesifisere forskjellige skriftfamilier for forskjellige tegnsett, noe som forbedrer innlastingstiden betraktelig ved å ikke laste unødvendige glyfer.

Eksempel: Servere forskjellige skrifttyper for latinske og kyrilliske tegn:

            @font-face {
 font-family: 'MyLatinFont';
 src: url('mylatinfont.woff2') format('woff2');
 unicode-range: U+0020-00FF; /* Basic Latin og Latin-1 Supplement */
}

@font-face {
 font-family: 'MyCyrillicFont';
 src: url('mycyrillicfont.woff2') format('woff2');
 unicode-range: U+0400-04FF; /* Cyrillic */
}

body {
 font-family: 'MyLatinFont', sans-serif;
}

/* Hvis teksten inneholder kyrilliske tegn, vil nettleseren automatisk bruke 'MyCyrillicFont' */

            

              
                Copy
              
            
          

Fordeler med å bruke Unicode-Range:

• Reduserte filstørrelser: Ved å servere forskjellige skrifttyper for forskjellige språk, kan du unngå å laste inn unødvendige glyfer, noe som resulterer i mindre filstørrelser og raskere innlastingstider.
• Forbedret ytelse: Mindre filstørrelser betyr raskere gjengivelse og en bedre brukeropplevelse.
• Nøyaktig tegn-gjengivelse: Du kan sikre at tegn gjengis korrekt for hvert språk ved å bruke skrifttyper som er spesielt designet for disse tegnsettene.
• Globalt webdesign: Kritisk for å støtte flerspråklige nettsteder og sikre korrekt gjengivelse for ulike språk.

Finne Unicode-områder: Du kan finne Unicode-områder for forskjellige språk og skriftsystemer på Unicode Consortiums nettside eller via nettsøk.

5. Forhåndslasting av skrifttyper: Prioritering av kritiske skrifttyper

Forhåndslasting lar deg instruere nettleseren til å laste ned en skriftfil så tidlig som mulig, selv før den blir funnet i CSS. Dette kan redusere den første gjengivelsestiden betydelig, spesielt for skrifttyper som brukes i kritiske deler av nettstedet ditt (f.eks. overskrifter, navigasjon).

Bruke <link>-taggen for forhåndslasting:

            <link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
            

              
                Copy
              
            
          

Attributter:

• rel="preload": Indikerer at ressursen skal forhåndslastes.
• href: Spesifiserer URL-en til skriftfilen.
• as="font": Spesifiserer typen ressurs som forhåndslastes (skrifttype).
• type="font/woff2": Spesifiserer MIME-typen til skriftfilen. Bruk den riktige MIME-typen for ditt skriftformat.
• crossorigin: Nødvendig hvis skrifttypen er lagret på et annet domene. Sett til anonymous eller use-credentials avhengig av din CORS-konfigurasjon.

Forhåndslasting med HTTP-headere: Du kan også forhåndslaste skrifttyper ved å bruke Link HTTP-headeren:

            Link: <mycustomfont.woff2>; rel=preload; as=font; type=font/woff2; crossorigin
            

              
                Copy
              
            
          

Beste praksis for forhåndslasting:

• Forhåndslast kun kritiske skrifttyper som er essensielle for den første gjengivelsen av nettstedet ditt.
• Unngå å forhåndslaste for mange skrifttyper, da dette kan påvirke ytelsen negativt.
• Sørg for at serveren din er konfigurert til å servere de riktige MIME-typene for skriftfilene dine.

Tilgjengelighetshensyn for nettskrifter

Selv om egendefinerte skrifttyper kan forbedre det visuelle uttrykket på nettstedet ditt, er det avgjørende å vurdere tilgjengelighet for å sikre at innholdet ditt er brukbart for alle, inkludert brukere med nedsatt funksjonsevne.

• Tilstrekkelig kontrast: Sørg for at kontrasten mellom teksten og bakgrunnsfargene oppfyller retningslinjene for tilgjengelighet (WCAG). Dårlig kontrast kan gjøre det vanskelig for brukere med nedsatt syn å lese teksten.
• Lesbar skriftstørrelse: Bruk en skriftstørrelse som er stor nok til å være lett leselig. Unngå å bruke for små skriftstørrelser. La brukere justere skriftstørrelsen om nødvendig.
• Tydelig skriftvalg: Velg skrifttyper som er leselige og lette å lese. Unngå å bruke overdrevent dekorative eller stiliserte skrifttyper som kan være vanskelige å tyde.
• Unngå å bruke skrifttyper kun for dekorasjon: Hvis en skrifttype primært tjener et dekorativt formål, bør du vurdere å bruke den sparsomt eller gi alternativ tekst (alt-attributt) for skjermlesere.
• Test med skjermlesere: Test nettstedet ditt med skjermlesere for å sikre at teksten leses korrekt og at alt innhold er tilgjengelig.
• Reserveskrifter: Spesifiser en generisk skriftfamilie (f.eks. sans-serif, serif, monospace) som en reserve i din CSS. Dette sikrer at teksten fortsatt er synlig selv om den egendefinerte skrifttypen ikke lastes inn.

Optimalisering av skriftlevering: Beste praksis for ytelse

Selv med avanserte teknikker for skriftinnlasting, er optimalisering av skriftlevering essensielt for å maksimere nettstedets ytelse. Her er noen sentrale beste praksiser:

• Vert skrifttyper lokalt: Å ha skrifttyper på din egen server gir vanligvis bedre ytelse enn å bruke tredjeparts skrifttjenester. Dette eliminerer DNS-oppslag og reduserer avhengigheten av eksterne ressurser.
• Bruk et CDN (Content Delivery Network): Hvis du hoster skrifttypene dine lokalt, bør du vurdere å bruke et CDN for å distribuere dem til servere over hele verden. Dette sikrer at brukere kan laste ned skrifttyper fra en server som er geografisk nær dem, noe som reduserer ventetid og forbedrer innlastingstidene.
• Komprimer skriftfiler: Bruk gzip- eller Brotli-komprimering for å redusere størrelsen på skriftfilene dine. De fleste webservere støtter disse komprimeringsalgoritmene.
• Mellomlagre skrifttyper: Konfigurer serveren din til å mellomlagre skriftfiler slik at de ikke lastes ned gjentatte ganger av samme bruker. Bruk passende cache-headere (f.eks. Cache-Control, Expires) for å kontrollere mellomlagringsatferd.
• Overvåk ytelsen til skriftinnlasting: Bruk nettleserens utviklerverktøy eller verktøy for overvåking av webytelse for å spore innlastingstider for skrifttyper og identifisere potensielle flaskehalser.

Feilsøking av vanlige problemer med skriftinnlasting

Til tross for dine beste anstrengelser, kan du støte på problemer med skriftinnlasting. Her er noen vanlige problemer og deres løsninger:

• Skrifttypen vises ikke:
  • Sjekk skriftstier: Verifiser at URL-ene i src-egenskapen er korrekte og at skriftfilene eksisterer på de angitte stedene.
  • Nettleser-caching: Tøm nettleserens cache for å sikre at du ikke ser en utdatert versjon av CSS- eller skriftfilene.
  • CORS-problemer: Hvis skrifttypen er hostet på et annet domene, sørg for at serveren er konfigurert for å tillate kryss-opprinnelsesforespørsler (CORS).
  • Feil MIME-typer: Verifiser at serveren din serverer de riktige MIME-typene for skriftfilene dine (f.eks. font/woff2 for WOFF2, font/woff for WOFF).
  • CSS-spesifisitet: Sørg for at CSS-reglene dine er spesifikke nok til å overstyre eventuelle motstridende stiler som kan forhindre at skrifttypen blir brukt.
• FOUT (Glimt av uformatert tekst):
  • Bruk font-display-egenskapen for å kontrollere gjengivelsesatferden for skrifttyper. Eksperimenter med forskjellige verdier (f.eks. swap, fallback) for å finne den beste balansen mellom innledende gjengivelseshastighet og visuell konsistens.
  • Forhåndslast kritiske skrifttyper for å redusere tiden det tar for dem å laste inn.
• Gjengivelsesproblemer med skrifttyper (f.eks. forvrengte tegn, feil mellomrom):
  • Sjekk skriftintegritet: Forsikre deg om at skriftfilene ikke er korrupte. Last ned en ny kopi fra kilden.
  • Nettleserkompatibilitet: Noen skrifttyper kan ha gjengivelsesproblemer i spesifikke nettlesere. Test nettstedet ditt i forskjellige nettlesere og versjoner.
  • CSS-konflikter: Se etter CSS-egenskaper som kan forstyrre skriftgjengivelsen (f.eks. text-rendering, letter-spacing).

Konklusjon

Å mestre CSS @font-face er essensielt for å lage visuelt tiltalende og ytelsessterke nettsteder som henvender seg til et globalt publikum. Ved å forstå avanserte teknikker som font-display, Font Loading API, variable skrifttyper, subsetting og forhåndslasting, kan du optimalisere skriftinnlasting, forbedre brukeropplevelsen og sikre nettleserkompatibilitet. Husk å prioritere tilgjengelighet og å kontinuerlig overvåke ytelsen til skriftinnlasting for å identifisere og løse potensielle problemer. Ved å følge beste praksis beskrevet i denne guiden, kan du heve dine webdesignferdigheter og lage nettsteder som er både vakre og tilgjengelige for brukere over hele verden. Verden blir stadig mer sammenkoblet, og oppmerksomhet på detaljer innen områder som skriftinnlasting har stor innvirkning på brukeropplevelsen for en mangfoldig, global brukerbase.